<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 设置</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="navbar-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="navbar-title">设置</div>
            <div class="navbar-btn invisible">
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content">
            <!-- 基础设置 -->
            <div class="card mb-3">
                <div class="card-title" style="padding: 15px !important;">基础设置</div>
                <div class="settings-list" style="padding: 0; margin-top: 0 !important; margin-bottom: 0 !important;">
                    <div class="settings-item" style="padding: 16px 15px;">
                        <div class="settings-item-title">邮箱</div>
                        <div class="settings-item-right">
                            <span class="text-gray-400 text-sm mr-2">example@email.com</span>
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                    <div class="settings-item" style="padding: 16px 15px;">
                        <div class="settings-item-title">深色模式</div>
                        <div class="relative inline-block w-10 align-middle select-none">
                            <input type="checkbox" name="dark_mode" id="dark_mode" class="hidden" />
                            <label for="dark_mode" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                <span class="block h-6 w-6 rounded-full bg-white transition-transform duration-200 ease-in-out"></span>
                            </label>
                        </div>
                    </div>
                    <div class="settings-item" style="padding: 16px 15px; border-bottom: none;">
                        <div class="settings-item-title">清除缓存</div>
                        <div class="settings-item-right">
                            <span class="text-gray-400 text-xs mr-2">23.5MB</span>
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 通用设置 -->
            <div class="card mb-3">
                <div class="card-title" style="padding: 15px !important;">通用</div>
                <div class="settings-list" style="padding: 0; margin-top: 0 !important; margin-bottom: 0 !important;">
                    <div class="settings-item" style="padding: 16px 15px;">
                        <div class="settings-item-title">关于我们</div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                    <div class="settings-item" style="padding: 16px 15px;">
                        <div class="settings-item-title">隐私政策</div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                    <div class="settings-item" style="padding: 16px 15px; border-bottom: none;">
                        <div class="settings-item-title">用户协议</div>
                        <div class="settings-item-right">
                            <i class="fas fa-chevron-right text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 退出登录 -->
            <div class="p-4">
                <button class="w-full py-2 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition-colors">退出登录</button>
            </div>

            <!-- 版本信息 -->
            <div class="text-center text-gray-400 text-xs mb-6">
                <p>AI选股 v1.0.0</p>
                <p class="mt-1">©2023 AI选股 保留所有权利</p>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- 邮箱修改模态框 -->
    <div id="emailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg w-11/12 max-w-md">
            <div class="p-4 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-medium">修改邮箱</h3>
                    <button onclick="closeEmailModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-4">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">新邮箱地址</label>
                    <input type="email" id="newEmail" 
                           class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="请输入新的邮箱地址">
                </div>
                <div class="flex justify-end space-x-3">
                    <button onclick="closeEmailModal()" 
                            class="px-4 py-2 border rounded-lg text-gray-600 hover:bg-gray-100">
                        取消
                    </button>
                    <button onclick="saveEmail()" 
                            class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取当前邮箱显示元素
        const emailDisplay = document.querySelector('.settings-item:first-child .text-gray-400');
        const emailModal = document.getElementById('emailModal');

        // 点击邮箱设置项时显示模态框
        document.querySelector('.settings-item:first-child').addEventListener('click', () => {
            emailModal.style.display = 'flex';
            document.getElementById('newEmail').value = emailDisplay.textContent.trim();
        });

        // 关闭模态框
        function closeEmailModal() {
            emailModal.style.display = 'none';
        }

        // 保存新邮箱
        function saveEmail() {
            const newEmail = document.getElementById('newEmail').value;
            if (!newEmail) {
                alert('请输入邮箱地址');
                return;
            }
            if (!isValidEmail(newEmail)) {
                alert('请输入有效的邮箱地址');
                return;
            }
            emailDisplay.textContent = newEmail;
            closeEmailModal();
        }

        // 验证邮箱格式
        function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }

        // 点击模态框外部时关闭
        emailModal.addEventListener('click', (e) => {
            if (e.target === emailModal) {
                closeEmailModal();
            }
        });
    </script>
</body>
</html>